<template>
  <div id="paths">
    <header1></header1>

    <div class="container layout layout-margin-top">
      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="content">
            <div class="row">
              <div class="col-sm-6" v-for="item in paths">
             <router-link :to="{'path':'/showpath',query:{'id':item.id}}">
                  <div class="path-item">
                    <div class="col-xs-5 col-md-4 path-img">
                      <img :src="item.pic" />
                    </div>
                    <div class="col-xs-7 col-md-8">
                      <div class="path-name">{{item.path}}</div>
                      <div class="path-course-num">
                        <span>{{item.course_num}}</span> 门课程
                      </div>
                    </div>
                    <!--<div class="desc-layer">
                        <div class="center">新手入门路径帮助对 IT 技术感兴趣的新手0基础入门计算机编程。本路径通过新手入门、Linux 及 Vim课程熟悉实验楼的实践学习环境，再以 C 语言和一个简单的项目引导你一步步进入计算机技术的殿堂。</div>
                    </div>-->
                  </div>
             </router-link>
              </div>
            </div>
          </div>
        </div>
        <hotpath1></hotpath1>
      </div>
    </div>
    <footer1></footer1>
  </div>
</template>

<script>
import header1 from "./header";
import footer1 from "./footer";
import hotpath from "./hotpath";

export default {
  name: "paths",
  components: {
    hotpath1: hotpath,
    header1: header1,
    footer1: footer1
  },
  data: function() {
    return {
      paths: []
    };
  },
  mounted() {
    this.getPath();
  },
  methods: {
    getPath: function() {
      this.axios({
        url: "/api/sadmin/show_path/",
        type: "get"
      }).then(res => {
        this.paths = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
</style>
